@import '../../assets/base.less';
.container{
  .test-h{
    height: 400px;
    .demo-text-1{
      // background-color: green;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .demo-text-2 {
      // background-color: yellowgreen;
      height: 400px;
    }
    .demo-text-3 {
      // background-color: blue;
      height: 400px;
    }
  }
  .status-top,.status-bottom{
    display: flex;
    align-items: center;
    padding: 0px 80px;
    justify-content: space-between;
    margin-top: 20px;
    & > View {
      text-align: center;
      .batteryvolatage-text,.insideTemp-text,.gpsinfo-text,.devicestatus-text,.internetinfo-text{
        font-size: 24px;
        color: #999;
      }
      .batteryvolatage-value,.insideTemp-value{
        font-size: 32px;
        font-weight: 900;
        color:#16a085;
      }
      .gpsinfo-value,.devicestatus-value,.internetinfo-value{
        font-size: 32px;
        font-weight: 900;
        color:#16a085;
      }
    }
  }
  .control-container{
    margin-top:98px;
    padding:0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fireControl{
      .fireCirle{
        width: 200px;
        height: 200px;
        border-radius: 100%;
        border: solid 10px @bluefontcolor;
        box-shadow: 0px 0px 20px @bluefontcolor;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 1s ease;
        &.active {
          border-color: red;
        }
        .insideCircle{
          width: 180px;
          height: 180px;
          background-color: @bluefontcolor;
          border-radius: 180px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          transition: all 1s ease;
          &.active {
            background-color: red;
          }
          .line{
            width: 80px;
            height: 10px;
            background-color: #fff;
            border-radius: 10px;
            margin-bottom:30px;
          }
          .fire-text{
            color: #fff;
          }
        }
      }
    }
    .windowControl,.lockControl{
      width: 230px;
      height: 150px;
      // background: red;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0px;
      .text{
        font-size: 30px;
        color: @bluefontcolor;
        padding-right: 10px;
      }
      .cline{
        width: 100%;
        height: 1px;
      }
      .slock,.jlock {
        display: flex;
        align-items: center;
        .sc-text{
          position: relative;
          top:5px;
        }
      }
      .jlock{
        .cancellock.iconfonts::after{
          content: '\e73b';
          font-size: 40px;
          color:@bluefontcolor;
        }
      }
      .slock{
        .slock.iconfonts::after{
          content: '\e709';
          font-size: 40px;
          color: @bluefontcolor;
        }
      }

    }
  }
  .other-button{
      position: fixed;
      bottom: 30px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top:50px;
      left:50%;
      margin-left:-355px;
      .cmd-wx{
        margin-right: 20px;
      }
      .cmd-wx,.cmd-call{
        width:320px;
        height: 70px;
        border: solid 1px @bluefontcolor;
        border-radius: 70px;
        color: @bluefontcolor;
        text-align: center;
        line-height: 70px;
        font-size: 30px;
      }
    }
}